<template>
  <div>
    <el-card class="box-card">
      <div class="BigDiv">
        <el-input class="ElInput" v-model="slideshowImageName"></el-input>
        <el-button icon="el-icon-search" @click="list" type="primary"></el-button>
        <el-button type="info" @click="slideshowImageName = ''">重置</el-button>
        <el-button type="primary" @click="openCreateVisible">添加</el-button>
        <!--表格-->
        <el-table
            :data="tableData"
            height="730"
            border
            style="margin-top: 10px;width: 100%">
          <el-table-column
              label="轮播图"
              width="220">
            <template slot-scope="scope">
              <el-image style="width: 120px;" :src="scope.row.slideshowImageUrl">
              </el-image>
            </template>
          </el-table-column>
          <el-table-column
              prop="slideshowImageName"
              label="图片标签"
              width="180">
          </el-table-column>
          <el-table-column
              prop="sequence"
              label="排序号"
              width="180">
          </el-table-column>
          <el-table-column
              prop="addUserName"
              label="添加人">
          </el-table-column>
          <el-table-column
              prop="createTime"
              label="添加时间">
          </el-table-column>
          <el-table-column
              prop="address"
              label="操作">
            <template slot-scope="scope">
              <span><el-button type="text" @click="openUpdateVisible(scope.row)">修改</el-button></span>
              <span><el-button type="text" @click="openRemoveWindow(scope.row.id)">删除</el-button></span>
            </template>
          </el-table-column>
        </el-table>
        <!--表格-->
      </div>
    </el-card>
    <!--分页-->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
    <!--分页-->
    <!--添加窗口-->
    <el-dialog
        title="添加轮播图"
        :visible.sync="createVisible"
        width="30%"
        :before-close="handleClose">
      <el-form label-width="100px" class="demo-ruleForm">
        <el-form-item label="商品图片" prop="name">
          <el-upload
              class="good-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus good-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="轮播图名称" prop="name">
          <el-input v-model="createForm.slideshowImageName" class="MayiInput"></el-input>
        </el-form-item>
        <el-form-item label="轮播图顺序" prop="name">
          <el-input-number v-model="createForm.sequence" :min="1" :max="6" label="请输入轮播图顺序级别" class="MayiInput"></el-input-number>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="createVisible = false">取 消</el-button>
        <el-button type="primary" @click="create">添 加</el-button>
      </span>
    </el-dialog>
    <!--添加窗口-->
    <!--修改窗口-->
    <el-dialog
        title="修改轮播图信息"
        :visible.sync="updateVisible"
        width="30%"
        :before-close="handleClose">
      <el-form label-width="100px" class="demo-ruleForm">
        <el-form-item label="商品图片" prop="name">
          <el-upload
              class="good-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus good-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="轮播图名称" prop="name">
          <el-input v-model="updateForm.slideshowImageName" class="MayiInput"></el-input>
        </el-form-item>
        <el-form-item label="轮播图顺序" prop="name">
          <el-input-number v-model="updateForm.sequence" :min="1" :max="6" label="请输入轮播图顺序级别" class="MayiInput"></el-input-number>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="updateVisible = false">取 消</el-button>
        <el-button type="primary" @click="update">修 改</el-button>
      </span>
    </el-dialog>
    <!--修改窗口-->
  </div>
</template>

<script>
export default {
  /*Data*/
  data() {
    return {
      imageFile:File,
      slideshowImageName: '',
      pageSize: 5,
      pageNum:1,
      total:0,
      imageUrl:'',
      createVisible: false,
      updateVisible:false,
      updateForm:{},
      overForm:{},
      createForm:{
        slideshowImageName: '',
        sequence: ''
      },
      restCreateForm:{
        slideshowImageName: '',
        sequence: '1'
      }
    }
  },
  /*自动挂载*/
  mounted() {
    this.list();
  },
  /*函数*/
  methods:{
    /*删除*/
    remove(id){
      this.$axios.post('memberZjx/slideshowImage/remove/'+id).then(res => {
        if (res.data.code === 200){
          this.MyMessage('删除','success')
          this.list()
          this.deleteLog('轮播图管理')
        } else {
          this.MyMessage(res.data.obj,'info')
        }
      })
    },
    /*删除窗口*/
    openRemoveWindow(id) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.remove(id)
      }).catch(() => {
        this.MyMessage('取消删除','info')
      });
    },
    /*打开修改窗口*/
    openUpdateVisible(data){
      this.imageUrl = JSON.parse(JSON.stringify(data.slideshowImageUrl))
      this.updateForm = JSON.parse(JSON.stringify(data))
      this.updateVisible = true
    },
    /*修改*/
    update(){
      const formData = new FormData()
      if (this.imageFile.name !== 'File') {
        formData.set('file', this.imageFile, this.imageFile.name)
      }
      formData.set("slideshowImageName",this.updateForm.slideshowImageName)
      formData.set("id",this.updateForm.id)
      formData.set("status",this.updateForm.status)
      formData.set("addUser",this.updateForm.addUser)
      formData.set("sequence",this.updateForm.sequence)
      this.$axios.post('/memberZjx/slideshowImage/update',formData).then(res => {
        if (res.data.code === 200) {
          this.createVisible = false
          this.MyMessage('修改成功','success')
          this.updateVisible = false
          this.list()
          this.updateLog('轮播图管理')
        } else {
          this.MyMessage('网络异常','info')
        }
      })
    },
    /*新增*/
    create(){
      const formData = new FormData()
      if (this.imageFile.name !== 'File') {
        formData.set('file', this.imageFile, this.imageFile.name)
      }
      formData.set("slideshowImageName",this.createForm.slideshowImageName)
      formData.set("sequence",this.createForm.sequence)
      formData.set("addUser",'2')
      this.$axios.post('/memberZjx/slideshowImage/create',formData).then(res => {
        if (res.data.code === 200) {
          this.createVisible = false
          this.MyMessage('添加成功','success')
          this.list()
          this.insertLog('轮播图管理')
        } else {
          this.MyMessage('网络异常','info')
        }
      })
    },
    /*打开添加窗口*/
    openCreateVisible(){
      this.createForm =  this.restCreateForm
      this.createVisible = true
    },
    /*全查*/
    list(){
      this.$axios.get('memberZjx/slideshowImage/list',{
        params:{
          slideshowImageName: this.slideshowImageName,
          pageNum: this.pageNum,
          pageSize:this.pageSize
        }
      }).then(res => {
        if (res.data.code === 200){
          this.tableData = res.data.obj.content
          this.total = res.data.obj.total
        } else {
          this.MyMessage(res.data.obj,'info')
        }
      })
    },
    /*上传图片回显*/
    beforeAvatarUpload (file) { // 设置图片上传格式
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
        return false
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
        return false
      }
      this.imageFile = file
      this.imageUrl = URL.createObjectURL(file)
      return false
    },
    MyMessage (msg, type) {
      this.$notify({
        showClose: true,
        message: msg,
        type: type
      })
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.list()
    },
    handleCurrentChange(val) {
      this.pageNum = val
      this.list()
    },
    handleClose(done) {
      done()
    }
  }
}
</script>

<style>
*{
  margin: 0;
  padding: 0;
}
.ElInput{
  width: 200px;
}
.box-card{
  height: 820px;
  margin: 10px;
}
</style>